<template>
  <transition name="el-fade-in">
    <el-affix
      :offset="50"
      position="bottom"
      @change="fixedStatusChange"
      :z-index="2100"
    >
      <!-- @scroll="fiexdScroll" -->
      <div class="test-content" v-if="!fiexdStatus">
        <div style="flex: 1"></div>
        <slot name="TipsHub"></slot>
        <slot name="functionHub"></slot>
      </div>
    </el-affix>
  </transition>
  <transition name="el-zoom-in-bottom">
    <div class="floating-content test-content1" v-if="fiexdStatus">
      <!-- <slot name="TipsHub"></slot> -->
      <el-popover placement="top" :width="50" trigger="click">
        <template #reference>
          <el-button>更多</el-button>
        </template>
        <div class="test-content2">
          <slot name="TipsHub"></slot>
        </div>
      </el-popover>
      <slot name="functionHub"></slot>
      <!-- <el-popover placement="top" :width="50" trigger="click">
        <template #reference>
          <div class="floatBtn margin_bottom">tips</div>
        </template>
        <el-button>诊断注意事项</el-button>
      </el-popover>
      <div class="floatBtn margin_bottom">二维码</div>
      <div class="floatBtn margin_bottom">切换</div>
      <div class="floatBtn margin_bottom">保存</div>
      <div class="floatBtn margin_bottom">提交</div> -->
    </div>
  </transition>
</template>
<script setup>
  import { ref, computed } from 'vue'
  // import { ElZoomInBottom } from 'element-plus'
  const fiexdStatus = ref(false)
  function fixedStatusChange(status) {
    console.log('status =' + status)
    fiexdStatus.value = status
  }
  // function fiexdScroll({scrollTop, fixed}) {
  //   console.log('scrollTop = ' + scrollTop)
  // }
</script>
<style lang="scss">
  @import '@/styles/floatView.scss';

  .test-content {
    display: flex;
    justify-content: right;
    justify-items: center;

    .footer-button {
      margin-left: 12px;
    }

    // align-items: center;
  }

  .test-content2 {
    button {
      width: 100%;
    }
  }

  .test-content1 {
    display: flex;
    z-index: 2100;
    flex-direction: column !important;
    justify-items: center;
    align-items: center;
    justify-items: center;

    button {
      margin-left: 0px !important;
      margin-bottom: 6px;
      font-size: 12px !important;
      border-radius: 40px;
      box-shadow: 0px 16px 34px 0px rgba(0, 49, 128, 0.2);
      pointer-events: auto;
    }

    // :deep(.el-button) {
    //   margin-left: 0px !important;
    // }
    // .footer-button {
    //   width: 50px;
    //   height: 50px;
    //   background: #fff;
    //   display: flex;
    //   justify-content: center;
    //   align-items: center;
    //   border-radius: 40px;
    //   box-shadow: 0px 16px 34px 0px rgba(0, 49, 128, 0.2);
    //   pointer-events: auto;
    //   font-size: 14px;
    // }
  }
</style>
<style lang="scss" scoped>
  .floating-popover-fade-in-out {
    &-enter-active,
    &-leave-active {
      transition-timing-function: ease;
      transition-duration: 200ms;
      transition-property: opacity, transform;
    }

    &-enter {
      opacity: 1;
      transform: translate3d(0, -10px, 0);
    }

    &-leave-to {
      opacity: 0;
      transform: translate3d(0, -10px, 0);
    }
  }
</style>
